<template>
  <div class="CommunityActivitySpaceInfo">
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>公共活动场地</span>
      </div>
      <div class="remark">
        有扭腰器、上肢牵引器等健身设施或健身步道、健身场地的平整场地。可与公园绿地重复计算。不填报封闭小区内的活动场地。可估算
      </div>
      <div
        class="content"
        v-if="
          info &&
          info.activityVenueCommunitySpaceInfos &&
          info.activityVenueCommunitySpaceInfos.length
        "
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.activityVenueCommunitySpaceInfos"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>用地面积：{{ item.area ? item.area + '平方米' : '' }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <!--        <el-empty description="暂无数据" />-->
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>公园绿地</span>
      </div>
      <div class="remark">
        不填报封闭小区内的绿地,不包含城市级公园绿地。可估算
      </div>
      <div
        class="content"
        v-if="
          info &&
          info.parkCommunitySpaceInfos &&
          info.parkCommunitySpaceInfos.length
        "
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.parkCommunitySpaceInfos"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>用地面积：{{ item.area ? item.area + '平方米' : '' }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <!--        <el-empty description="暂无数据" />-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})
</script>

<style scoped lang="scss">
.CommunityActivitySpaceInfo {
  padding: 15px 10px 15px 5px;
  overflow-y: auto;
  height: 100%;

  :deep(.el-descriptions__label) {
    display: inline-block;
    width: 102px;
  }

  .content {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    span {
      font-size: 14px;
      line-height: 32px;
    }
  }

  .title {
    margin-top: 5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    :deep(.el-icon) {
      width: 3px;
      height: 18px;
      margin-right: 6px;
      background-color: #28b1e4;
      border-radius: 2px;
    }

    span {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .building-info-item {
    display: flex;
    flex-direction: column;
    padding: 11px 15px;
    background-color: rgba(249, 249, 252, 1);
    border-radius: 4px;
    margin-bottom: 12px;

    color: #717689;

    .position {
      color: RGBA(39, 71, 95, 1);
    }
  }
}
</style>
